import React,{Component } from 'react'
import "./style.css"
import ShopList from "../../components/ShopList/index"
import TitleHeader from '../../components/TitleHeader/index'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {axios} from "../../axios/index"

class App extends Component {
	static propTypes = {
		themeColor: PropTypes.string,
		onSwitchColor: PropTypes.func
	}

	constructor(props) {
        super(props)
        this.state = {shopList: []}
	}
	render(){
		return (
			<div>
				<TitleHeader></TitleHeader>
				<div className="order-list">
					{
						this.state.shopList.map((item,index)=>{
							return <ShopList key={item.id} data={item} gotoEva={this.gotoEva.bind(this)}></ShopList>
						})
					}
					<div>
						{'redux->themeColor:'+ this.props.themeColor}
					</div>
					<div style={{color:this.props.themeColor,fontSize:'16px',marginTop:'20px'}} onClick={this.handleSwitchColor.bind(this)}>改变颜色</div>
				</div>
			</div>
			
		)
	}

	//修改颜色
	handleSwitchColor () {
		let color = this.props.themeColor
		color = color == "blue" ? 'green' : 'blue'
		if (this.props.onSwitchColor) {
			// dispatch action 去改变颜色
			this.props.onSwitchColor(color)
		}
	}
	

	//去评论
	gotoEva(item){
		this.props.history.push(`/evaluate/${item.id}`)
	}

	componentDidMount(){
		const _this = this
		fetch("/ShopData.json").then((res)=>{
			if(res.ok){
				res.json().then((data)=>{
					_this.setState({
						shopList:data
					})
				})
			}
		}).catch((err)=>{})
		axios("musicDetail",{name:"好久不见"}).then((res)=>{

		}).catch((err)=>{
			
		})
	}
}

const mapStateToProps = (state) => {
	return {
	  themeColor: state.ColorReducers.themeColor
	}
}


const mapDispatchToProps = (dispatch) => {
	return {
		onSwitchColor: (color) => {
			dispatch({ type: 'CHANGE_COLOR', themeColor: color })
		}
	}
}

export default connect(mapStateToProps, mapDispatchToProps) (App)